<script>
// 明细模态表单页
Vue.component('stock-balance-house-details', {
    template: `
<el-dialog :title="houseTitle+' 库存明细'" :visible.sync="dialogShow" width="1200px" @close="closeModal">
 <div class="recordListBox">
    <el-card class="box-card" style="cursor: initial;">
        <div class="recordTable">
        <template>
        <el-table :data="recordList" border stripe  style="cursor: initial;">
        <el-table-column type="index">
        </el-table-column>
        <el-table-column prop="product_title" label="产品名称">
        <template slot-scope="scope">
        <p>{{ scope.row['product_title'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="product_unit" label="单位">
        <template slot-scope="scope">
        <p>{{ scope.row['product_unit'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="product_cost_price" label="成本价" sortable>
        <template slot-scope="scope">
        <p>{{ scope.row['product_cost_price'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="pure_n" label="库存" sortable>
        <template slot-scope="scope">
        <p>{{ scope.row['pure_n'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="balance_money" label="库存余额" sortable>
        <template slot-scope="scope">
        <p>{{ scope.row['money'] }}</p>
        </template>
        </el-table-column>
        </el-table>
        <!--分页------>
          <p style="margin-top: 10px;text-align: center">
            <el-pagination
            background
            layout="prev, pager, next, total"
            :page-size="recordListPage.pageSize"
            :total="recordListPage.totalCount"
            @current-change="handlerRecordPageChange"
            >
            </el-pagination>
          </p>
        </template>
        </div>
        </el-card>
    </div>
</el-dialog>
    `,
    props: ['dialog-show', 'house-id','house-title'],
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally() {
            return this.$store.state.currentTally
        }
    },
    watch: {
        dialogShow:{
            handler (newVal) {},
            deep:true,
            immediate: true
        },
        houseId: {
            handler (newVal) {
                if(parseInt(newVal) > 0)  this.initData()
            },
            deep:true,
            immediate: true
        }
    },
    data:function(){
        return {
            recordDialog:false,
            recordList:[],
            currentPage:1,
            recordListPage:{
                pageSize:10,
                totalCount:0,
            },
        }
    },
    methods:{
        closeModal(){
            this.$emit('modalClose')
        },
        modalClose(){
            this.recordDialog = false
        },
        initData() {
            this.recordList = []
            this.getRecordList()
        },
        handlerRecordPageChange(page) {
            this.currentPage = page
            this.getRecordList()
        },
        getRecordList(){
            let that = this
            let getParams = {
                tally_id : that.currentTallyId,
                house_id : that.houseId,
                page: that.currentPage
            }
            axios.get('/api/stock-balance/house-detail',{
                method: 'get',
                headers: {'token': loginToken},
                params: getParams
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.recordList = res.data.data.data
                    that.recordListPage = res.data.data['pageInfo']
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
    }
})
</script>
